<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <title>自媒体</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="format-detection" content="telephone=no">
    <link rel="stylesheet" href="/css/see/reset.min.css">
    <link rel="stylesheet" href="/css/see/swiper.min.css">
    <link rel="stylesheet" href="/css/see/selfMedia1.min.css?v=<%=$version%>">
</head>
<body>
<div id="selfMedia" v-cloak>
    <div class="selfMedia-top">
        <div class="selfMedia-topTop">
            <span class="selfMedia-Back" @click="getBack()"></span>
            <div class="selfMedia-search"><strong>自媒体</strong><span>搜索产品名称或分类</span><span class="search-icon"></span></div>
            <span class="selfMedia-icon"></span>
        </div>
        <div class="selfMedia-topSlide">
            <div id="selfMediaSlide1" class="swiper-container">
                <div class="swiper-wrapper">
                    <div class="swiper-slide" v-for="list in garouselList">
                        <a>
                            <!--<div class="selfMedia-topbg" :style="bgimg(list.background)"></div>-->
                            <img class="swiper-lazy selfMedia-topbg" :data-src="list.background">
                            <img class="swiper-lazy slideImg" :data-src="list.imgSrc">
                        </a>
                    </div>
                </div>
                <div class="swiper-pagination"></div>
            </div>
        </div>
        <div class="selfMedia-topbutt">
            <div id="hotNewsList">
                <div class="hotNewsList">
                    <p v-for="item in hotNewsList">头条－{{item.title}}</p>
                </div>
            </div>
        </div>
    </div>
    <nav class="index-nav">
        <div class="clearfix">
            <a v-for="item in userCategoryList" :type="item.categoryId" @click="getNext(item.categoryId,item.name)"><span :style="bgimg(item.imgSrc)"></span>{{item.name}}</a>
            <a @click="getIsClassify()"><span class="selfMedia-more"></span>全部分类</a>
        </div>
    </nav>
    <div class="selfMedia-rankingList">
        <div class="rankingList-title clearfix">排行TOP10<span>更多</span></div>
        <div class="rankingList-slide">
            <div class="swiper-container">
                <selfmedia-slide :list="topList"></selfmedia-slide>
                <!--<div class="swiper-wrapper">-->
                    <!--<div class="swiper-slide clearfix" v-for="(item,index) in topList">-->
                        <!--<span class="selfMedia-s1" v-show="index<4">{{index+1}}</span>-->
                        <!--<span class="selfMedia-s4" v-show="index>3">{{index+1}}</span>-->
                        <!--<div class="slideImg">-->
                            <!--<img class="swiper-lazy slideImg" :data-src="item.coverImgSrc">-->
                            <!--<span class="selfMedia-zyz1"></span>-->
                        <!--</div>-->
                        <!--<h6 class="list-infoTitle">{{item.title}}</h6>-->
                        <!--<p class="list-infoInfo clearfix">{{item.playCount/10000}}万<span>赚{{item.integral}}乐币</span></p>-->
                    <!--</div>-->
                <!--</div>-->
            </div>
        </div>
    </div>
    <div class="selfMedia-cent">
        <div class="selfMedia-centTitle">
            <span class="centTitle-popularity" :class="{active:(indexs==1)}" @click="centTitleTab(1)">人气</span>
            <strong></strong>
            <span class="centTitle-nearby" :class="{active:(indexs==2)}" @click="centTitleTab(2)">附近</span>
            <strong></strong>
            <span class="centTitle-circle" :class="{active:(indexs==3)}" @click="centTitleTab(3)">圈子</span>
            <strong></strong>
            <span class="selfMedia-down">全部分类</span>
            <strong class="ml9"></strong>
            <span class="selfMedia-screen ml9">地区</span>
            <span class="selfMedia-open"></span>
        </div>
        <template v-if="indexs==1">
            <selfmedia-flow :list="hotAdvList2"></selfmedia-flow>
        </template>
        <template v-if="indexs==2">
            <selfmedia-flow :list="nearbyAdvList2"></selfmedia-flow>
        </template>
        <div class="loadtip" v-if="loadFlag"></div>
        <!--<div class="selfMedia-flow clearfix">-->
            <!--<div class="selfMedia-flowList" v-for="item in hotAdvList2">-->
                <!--<div class="flowList-div">-->
                    <!--<img class="lazy" src="/imgs/see/index/index-bgimg1.png" :data-original="item.coverImgSrc">-->
                    <!--<span class="flowList-img">赚{{item.integral}}乐币</span>-->
                    <!--<span class="selfMedia-zyz2"></span>-->
                    <!--<div class="flowList-info">-->
                        <!--<h6 class="list-infoTitle">{{item.title}}</h6>-->
                        <!--<p class="clearfix">{{item.playCount/10000}}万<span v-if="item.provinceName">{{item.provinceName}}-{{item.cityName}}</span></p>-->
                    <!--</div>-->
                <!--</div>-->
            <!--</div>-->
        <!--</div>-->
    </div>
    <div class="selfMedia-butt clearfix">
        <a><span class="selfMedia-m1"></span><strong>首页</strong><i></i></a>
        <a><span class="selfMedia-m2"></span><strong>任务</strong><i class="spot1"></i></a>
        <a><span class="selfMedia-m3"></span><strong>储物箱</strong><i class="spot2"></i></a>
        <a><span class="selfMedia-m4"></span><strong>活动</strong><i class="spot3"></i></a>
        <a><span class="selfMedia-m5"></span><strong>消息</strong><i class="spot4"></i></a>
    </div>
    <div id="mask" v-show="isClassify"></div>
    <div id="selfMedia-classify" class="classify" v-show="isClassify">
        <h6 class="classify-title"><span class="classify-titleLeft" @click="getIsClassify()"></span>全部分类<span class="classify-titleRight">定制</span></h6>
        <div class="classify-cent clearfix">
            <a v-for="item in allCategoryList"><span :style="bgimg(item.imgSrc)"></span><strong>{{item.name}}</strong></a>
            <!--<a><span></span><strong>购物</strong></a>-->
        </div>
    </div>
    <prompt-view ref="prompt"></prompt-view>
</div>
<script type="text/javascript" src='/plugins/js/jquery-1.11.3.min.js'></script>
<script type="text/javascript" src="/plugins/js/vue.min.js"></script>
<script type="text/javascript" src="/plugins/js/swiper-3.4.2.jquery.min.js"></script>
<script type="text/javascript" src="/plugins/js/jquery.masonry.min.js"></script>
<script type="text/javascript" src="/plugins/js/jquery.lazyload.min.js"></script>
<script type="text/javascript" src="/js/see/selfMedia1.js?v=<%=$version%>"></script>
<script>
    var swiper1 = new Swiper("#selfMediaSlide1",{
        spaceBetween: 30,
        centeredSlides: true,
        autoplay:1500,
        autoplayDisableOnInteraction : false,
        pagination: '.swiper-pagination',
        paginationClickable: true,
        lazyLoading : true,
        lazyLoadingInPrevNext : true,
        lazyLoadingInPrevNextAmount : 3,
        observer: true,//修改swiper自己或子元素时，自动初始化swiper
        observeParents: true//修改swiper的父元素时，自动初始化swiper
    });
    var swiper = new Swiper('.rankingList-slide .swiper-container', {
        spaceBetween: 10,
        slidesPerView: 'auto',
        freeMode: true,
        lazyLoading : true,
        lazyLoadingInPrevNext : true,
        lazyLoadingInPrevNextAmount : 3,
        observer: true,//修改swiper自己或子元素时，自动初始化swiper
        observeParents: true//修改swiper的父元素时，自动初始化swiper
    });
    // getLocation();
    // function getLocation(){
    //     if (navigator.geolocation){
    //         navigator.geolocation.getCurrentPosition(showPosition);
    //     }else{
    //         x.innerHTML="Geolocation is not supported by this browser.";
    //     }
    // }
    // function showPosition(position){
    //     alert("我在经纬度为"+position.coords.latitude+","+position.coords.longitude+"的地方哦！");
    // }
</script>
</body>
</html>